<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="100" align="bottom">
        <el-col :span="6">
          <el-input style="width: 200px" v-model="name" autosize prefix-icon="el-icon-document" placeholder="根据人名搜索"></el-input>
        </el-col>
        <el-col :span="6">

        </el-col>
        <el-col :span="6">
          <el-button  type="primary" icon="document" @click="searchLoading">搜索</el-button>
          <el-button  type="primary" icon="document" @click="addFace">新增人脸</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="height: -webkit-calc(100% - 50px);margin-top: 10px">
      <xjr-table @custom-click="customFace" :loading="loading" ref="user_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
    <el-dialog @close="closeVideo"  ref="addFace" :destroy-on-close="true"  top="15vh" title="上传人脸" :visible.sync="showDialog">
      <h2 align="center">上传人脸</h2>
      <el-form ref="form" :model="currentFaceForm" :rules="rules" label-width="80px">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="currentFaceForm.userId"></el-input>
        </el-form-item>
        <el-form-item label="分值" prop="score">
          <el-input v-model="currentFaceForm.score"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="save">保存</el-button>
        <el-button type="primary" @click="showDialog=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog @close="closeVideo" :destroy-on-close="true"  width="30%" title="人脸采集" :visible.sync="Showcamera">
      <face-camera  @success="checkSuccess" ref="camera"></face-camera>
    </el-dialog>
    <el-dialog  :destroy-on-close="true"  width="30%" title="人脸" :visible.sync="showImg">
      <el-image :src="imgUrl"></el-image>
    </el-dialog>

  </div>
</template>

<script>
  function checkScore(rule,value,callback) {
    let reg=/^([1-9]\d{0,1}|100)$/;
    if (!reg.test(value)){
      return callback(new Error("只能输入一百以内的数字"));
    }else{
      return callback();
    }
  }
  export default {
    name: "Face",
    data() {
      return {
        showImg:false,
        imgUrl:'',
        img:'',//img base64
        Showcamera:false,
        rules: {
          userId: [
            {required: true, message: '用户名不得为空', trigger: 'change'}
          ],
          score: [
            {required: true, message: '输入0到100的分值', trigger: 'change', validator: checkScore}
          ]
        },
        currentFaceForm:{},
        showDialog:false,
        name:'',
        loading:false,
        tableData:[],
        tableDataCache:[],
        cols:[{prop:'guid',label:'人脸主键',sort:false,hidden:true},
          {prop:'studentName',label:'姓名',sort:false,hidden:false},
          {prop:'updateTime',label:'更新时间',sort:false,hidden:false,dataType:'date'},
          {prop:'createTime',label:'创建时间',sort:true,hidden:false,dataType:'date'},
          {prop:'score',label:'比对分数',sort:true,hidden:false},
          {prop:'operate',label:'操作',hidden:false,options:[
              {label:'查看人脸',prop:'browser'},
              {label:'删除',prop:'delete',type:'danger'}
            ]}
        ],
      }
    },
    methods:{
      closeVideo(){
        this.$refs.camera.closeVideo();
      },
      checkSuccess(imgstr){
        let g=this;
        g.img=imgstr;
        g.closeVideo();
        g.Showcamera=false;
        g.$nextTick(()=>{
          g.showDialog=true;;
        })

      },
      save(){
        let g=this;
        g.$refs.form.validate(validat=>{
          if (validat){
            if (g.isNullOrEmpty(g.img)){
              g.message({message:'未选中图片',type:'error'})
              return;
            }
            else{
              g.$ajaxPost('/faceInformation/addFaceToDataBase',{data:{userId:g.currentFaceForm.userId,standardScore:g.currentFaceForm.score,faceContent:g.img }}).then(res=>{
                g.message({message:'上传成功',type:'success',onClose:()=>{
                    g.showDialog=false;
                    g.$nextTick(()=>{
                      g.currentFaceForm={};
                      g.img='';
                      g.init();
                    })

                  }});
              }).catch(e={

              })
            }
          }else{

          }
        })
      },
      addFace(){
        let g=this;
        g.$nextTick(()=>{
          g.Showcamera=true;
          g.$nextTick(()=>{
            g.$refs.camera.openVideo();
          })
        })

      },
      customFace(index,row,customType){
        let g=this;
        g.imgUrl='';
        if (customType==='browser'){//查看图片
          g.imgUrl=`data:image/bmp;base64,${row.faceContent}`;
          g.showImg=true;
        }else{//删除
          this.$confirm('此操作将永久删除该张人脸，学生将无法参与考勤活动, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            g.$ajaxDelete(`/faceInformation/${row.guid}`).then(res=>{
              g.message({message:'删除成功',type:'success',onClose:()=>{
                g.showImg=false;
                g.init();
                }})
            })
          }).catch(() => {

          });
        }
      },
      searchLoading(){
        let g=this;
        g.tableData=[];
        g.init().then(res=>{
          g.$nextTick(()=>{
            g.tableData=g.tableData.filter(data=>{
              return (data.studentName.indexOf(g.name))!=-1;
            })
          })
        })
      },
      async loadAllFaces(){
        return this.$ajaxGet('/faceInformation/getALlFaces');
      },
      async init(){
        let g=this;
        g.tableData=await g.loadAllFaces();
      },
    },
    created() {
      this.init();
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
